<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出简单商品信息</title>
<style>
body{
font-family:微软雅黑}
.pic img{ width:180px;}
.name{
margin-top:5px;
font-size:14px;
font-weight:bold
}
.price{
font-size:12px;
color:#666666
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<my-slot>
		<img :src="pic"><!--这行代码会被视为默认插槽的内容-->
		<template v-slot:name>
			{{name}}
		</template>
		<template v-slot:price>
			{{price}}
		</template>
	</my-slot>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-slot', {
    template: '<div> \
        <div class="pic"> \
			<slot></slot> \
		</div> \
		<div class="name"> \
			<slot name="name"></slot> \
		</div> \
        <div class="price"> \
			<slot name="price"></slot> \
		</div> \
      </div>'
})
//创建根实例
var vm = new Vue({
    el: "#example",
	data : {
		pic : 'R9s.jpg',
		name : 'OPPO R9s',
		price : '¥5888.00'
	}
});
</script>


</body>

</html>



